<template>
  <!-- 递归组件 -->
  <div style="display: flex;">
    <div class="tabs" :class="[active === index ? 'active' : '']" v-for="(item, index) in data" :key="index" @click="switchCom(item, index)">
      <div class="com">{{ item.name }}</div>
    </div>
  </div>

  <component :is="comId"></component>
</template>


<!-- 方法一 -->
<script setup lang='ts'>
/* import { ref, reactive, markRaw, shallowRef } from 'vue'
import BVue from "./components/B.vue"
import CVue from "./components/C.vue"
import DVue from "./components/D.vue"

// shallowRef 过滤掉不必要的属性，减少性能浪费
const comId = shallowRef(BVue)

const active = ref(0)

// markRaw
// 组件有了这个之后，会有一个__skip__属性，会跳过Proxy代理,就不会浪费多余属性

const data = reactive([
  {
    name: 'B组件',
    com: markRaw(BVue)
  },
  {
    name: 'C组件',
    com: markRaw(CVue)
  },
  {
    name: 'D组件',
    com: markRaw(DVue)
  }
])

const switchCom = (item, index) => {
  console.log(item, index)
  comId.value = item.com
  active.value = index
} */

</script>

<!-- 方法二 -->
<script lang="ts">
import { ref, reactive, shallowRef } from 'vue'
import BVue from "./components/B.vue"
import CVue from "./components/C.vue"
import DVue from "./components/D.vue"

const comId = shallowRef('BVue')

const active = ref(0)

const data = reactive([
  {
    name: 'B组件',
    com: 'BVue'
  },
  {
    name: 'C组件',
    com:'CVue'
  },
  {
    name: 'D组件',
    com: 'DVue'
  }
])

const switchCom = (item, index) => {
  console.log(item, index)
  comId.value = item.com
  active.value = index
}

export default {
  components: {
    BVue,
    CVue,
    DVue
  }
}

</script>


<style scoped lang='less'>
.active {
  background-color: skyblue;
}
.tabs {
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid #ccc;
}
</style>